import { dom, _toggleClassName, _closest } from "./dom.js"
export const _checkbox_native = (val, props = {}, events) => {
    let {
        options
    } = props
    if (Array.isArray(options)) {
        let checkboxs = options.map(t => {
            return dom.input(t.label, {
                ...t,
                type: 'checkbox'
            })
        })
        let group = dom.div(checkboxs, {
            class: 'checkbox_group'
        })

        return group

    } else {
        return dom.input("", {
            ...props,
            type: 'checkbox'
        })
    }
}

export const _checkboxItem = (val, props = {}, events) => {
    let {
        checked,
        name
    } = props
    let isChecked = checked ? ' is-checked' : ''
    let inner = dom.span("", {
        class: "checkbox__inner"
    })
    let input = dom.input("", {
        type: 'checkbox',
        checked: checked ? true : undefined,
        name
    }, (e) => {
        let el = e.target
        let parent = _closest(el, ".checkbox__input")
        _toggleClassName(parent, "is-checked")

    })

    let checkboxInput = dom.span([inner, input], {
        class: 'checkbox__input' + isChecked
    }, {})
    let label = dom.span(val, {
        class: 'checkbox__label'
    })
    return dom.label([checkboxInput, label], {
        class: 'checkbox' //+ isChecked
    })

}

export const _checkbox = (val, props = {}, events) => {
    let {
        options,
        name
    } = props
    if (Array.isArray(options)) {
        let checkboxs = options.map(t => {
            return _checkboxItem(t.label, {
                checked: t.value === val,
                name

            })
        })
        let group = dom.div(checkboxs, {
            class: 'checkbox_group'
        }, (e) => {
            // console.log(e.target)

        })

        return group

    } else {

        return _checkboxItem("", {

        })
        // return dom.input("", {
        //   ...props,
        //   type: 'checkbox'
        // })
    }
}
